<template>
  <svg aria-hidden="true"  class="svg-icon" :style="
  'width:' + width +
  ';height:' + height">
    <use :xlink:href="symbolId" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  prefix: { type: String, default: "icon" },
  iconClass: { type: String, required: true },
  color: { type: String, default: "" },
  width: { type: String, default: "" },
  height: { type: String, default: "" },
});

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped lang="scss">
.svg-icon {
}
</style>